<template>
  <div class="container" v-loading="isLoading">
    <el-card>
      <template #header>
        <el-form inline :model="searchForm" ref="searchForm">
          <el-form-item label="状态">
            <el-select v-model="searchForm.status">
              <el-option label="全部" value="" />
              <el-option
                v-for="(oVal, oIdx) of auditStatus"
                :key="oIdx"
                v-bind="oVal"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitSearch">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- <div class="table_tool">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="showAddOrEdit = true"
            >新增</el-button
          >
        </div> -->
      </template>
      <el-table :data="tableData" border>
        <el-table-column prop="group_name" label="志愿者组织名称" />
        <el-table-column prop="name" label="实名信息" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="nickname" label="微信昵称" />
        <el-table-column prop="headimgurl" label="微信头像">
          <template #default="{ row }">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.headimgurl"
              :preview-src-list="[row.headimgurl]"
            />
          </template>
        </el-table-column>
        <el-table-column prop="native" label="籍贯" />
        <el-table-column prop="subdistrict" label="所属小区" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <span :class="auditClass[row.status]">{{
              auditObj[row.status]
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px" align="center">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              @click="openEditRow(row, 'builingForm', initInfoCard)"
              >查看详情</el-button
            >
            <template v-if="row.status === 1">
              <el-button type="text" @click="changeStatus(row, 2)"
                >通过</el-button
              >
              <el-button type="text" @click="changeStatus(row, 3)"
                >不通过</el-button
              >
            </template>
            <!-- <el-button type="text" class="red" @click="delRowById(row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="pagination.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="pagination.page_size"
        :total="tableTotal"
        @size-change="(val) => (pagination.page_size = val)"
        @current-change="(val) => (pagination.page = val)"
      />
    </footer>

    <el-dialog
      :title="(builingForm.$id ? '查看' : '新增') + '入组申请详情'"
      :visible.sync="showAddOrEdit"
      width="666px"
      @closed="() => $refs['builingForm'].resetFields()"
    >
      <el-form
        :model="builingForm"
        :rules="builingRules"
        ref="builingForm"
        label-width="5em"
      >
        <el-form-item prop="$id" hidden />
        <InfoCard v-model="infoObj" />
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { table, addOrEdit, auditStatus } from "@/utils/mixins";
import InfoCard from "@/components/InfoCard.vue";
import API from '@/api';

const MAPS = {
  infoMap: {
    组织名: "name",
    手机号: "phone",
    性别: "$sex",
    籍贯: "native",
    小区: "subdistrict",
    微信昵称: "nickname",
    状态: "$status",
  },
};
export default {
  mixins: [table, addOrEdit, auditStatus],
  components: {
    InfoCard,
  },
  data: () => ({
    searchForm: {
      $action: ["getJoinVoluntGroupList"],
      status: "",
    },
    builingForm: {
      name: "",
    },
    builingRules: {},
    builingOptions: {
      sex: [
        { label: "男", value: 1 },
        { label: "女", value: 2 },
      ],
    },

    infoObj: {},
  }),
  computed: {
    sexObj() {
      return this.builingOptions.sex.reduce(
        (acc, cur) => ((acc[cur.value] = cur.label), acc),
        {}
      );
    },
  },
  methods: {
    // 租赁详情
    initInfoCard({ row }) {
      row.$sex = this.sexObj[row.gender]
      row.$status = this.auditObj[row.status]
      // 出租状态
      this.infoObj = _.cloneDeepWith(MAPS.infoMap, (path) => _.get(row, path));
    },
    // 实名审核
    changeStatus({ id }, status) {
      API.setJoinVoluntGroupStatus(id, { status })
        .then(() => {
          this.$message.success("状态更新成功！");
          this.fetchData()
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped></style>
